<template>
	<el-dialog v-model="showModel" :fullscreen="fullscreen" destroy-on-close :show-close="false" append-to-body :lock-scroll="false" draggable :close-on-press-escape="false" @close="handleClose()">
		<template #header="{ close, titleId, titleClass }">
			<div class="uw-flex-between uw-border-white-smoke-bottom uw-pb-16">
				<h4 :id="titleId" :class="titleClass">
					<slot name="title">{{title}}</slot>
				</h4>
				<div class="uw-flex-between">
					<el-icon style="cursor: pointer;" class="uw-mr-10" :size="16" color="#555" @click="fullscreen=!fullscreen">
						<FullScreen />
					</el-icon>
					<el-icon style="cursor: pointer;" :size="20" color="#999" @click="close">
						<Close />
					</el-icon>
				</div>
			</div>
		</template>
		<template #default>
			<slot></slot>
		</template>
		<template #footer>
			<slot name="footer"></slot>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		title:{
			type:String,
			default:''
		}
	})
	const emits = defineEmits(['update:modelValue'])
	const showModel = ref(props.modelValue)
	watch(() => props.modelValue, (newVal) => {
		showModel.value = newVal
	})
	const fullscreen = ref(false)
	const handleClose = () => {
		emits('update:modelValue',false)
	}
</script>

<style>
</style>